/**
 * 定义一个名为BookTable的常量对象，用于创建书籍列表的表格组件
 */
const BookTable = {
    // 组件名称
    name: 'BookTable',
    // 使用模板字符串定义HTML结构
    template: `
      <table>
        <thead>
        <tr>
            <th>书名</th> <th>作者</th> <th>ISBN</th>
            <th>出版社</th> <th>出版年份</th>   <th>语言</th>
            <th>位置</th> <th>状态</th> <th>封面</th>
            <th>描述</th>  <th>附件</th>  <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用v-for指令遍历books数组，为每本书生成一行 -->
        <tr v-for="book in books" :key="book.id">
            <td>{{ book.title }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.isbn }}</td>
            <td>{{ book.publisher }}</td>
            <td>{{ book.publicationYear }}</td>
            <td>{{ book.language }}</td>
            <td>{{ book.location }}</td>
            <!-- 使用getStatusText函数将状态码转换为文本 -->
            <td>{{ getStatusText(book.status) }}</td>
            <td>
                <!-- 根据是否有封面URL，决定显示封面图片还是显示“无” -->
                <div v-if="book.coverUrl" class="preview">
                    <img :src="book.coverUrl" alt="封面预览" style="max-width: 50px; max-height: 50px;">
                </div>
                <div v-else>无</div>
            </td>
            <td>{{ book.description }}</td>
            <td>
                <!-- 根据是否有附件URL，决定是否显示预览和下载链接 -->
                <div v-if="book.attachFileUrl">
                    <a :href="book.attachFileUrl" target="_blank">预览</a>
                    <a :href="book.attachFileUrl" download>下载</a>
                </div>
                <div v-else>无</div>
            </td>
            <td>
                <!-- 编辑和删除按钮，点击时触发相应的事件 -->
                <button style="margin-right: 5px" @click="$emit('edit', book)">编辑</button>
                <button @click="$emit('delete', book.id)">删除</button>
            </td>
        </tr>
        </tbody>
      </table>
    `,
    // 定义组件的属性
    props: {
        // 书籍数组，类型为Array，默认值为空数组
        books: {
            type: Array,
            default: () => [],
        }
    },
    // 使用setup函数定义组件的响应式属性和方法
    setup() {
        // 根据书籍状态码返回对应的状态文本
        const getStatusText = (status) => {
            const statusMap = {
                1: '在馆',
                2: '外借',
                3: '未上架'
            }
            return statusMap[status] || '未知'
        }
        // 返回定义的方法，使其能在模板中使用
        return { getStatusText };
    }
};